<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bar-animation-delay&theme=dark
-->
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">
<head>
  <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  
  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>

  <script type="text/javascript">
    var tradeMinutes = [[${objMinutes_}]];
    var yesToDayAmount = [[${objyestoDayAmount_}]];
    var toDayAmount = [[${objToDayAmount_}]];

    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, 'dark', {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
      title: {
        text: '量能分时'
      },
      legend: {
        data: ['今日', '昨日']
      },
      toolbox: {
        // y: 'bottom',
        feature: {
          magicType: {
            type: ['stack']
          },
          dataView: {},
          saveAsImage: {
            pixelRatio: 2
          }
        }
      },
      tooltip: {},
      xAxis: {
        data: tradeMinutes,
        splitLine: {
          show: false
        },
      },
      yAxis: {},
      series: [
        {
          name: '今日',
          type: 'bar',
          data: toDayAmount,
          emphasis: {
            focus: 'series'
          },
          animationDelay: function (idx) {
            return idx * 10;
          },
          itemStyle : {
                color:'red'
            }
        },
        {
          name: '昨日',
          type: 'bar',
          data: yesToDayAmount,
          emphasis: {
            focus: 'series'
          },
          animationDelay: function (idx) {
            return idx * 10 + 100;
          },
          itemStyle : {
            color:'#999999'
          },
        }
      ],
      animationEasing: 'elasticOut',
      animationDelayUpdate: function (idx) {
        return idx * 5;
      }
    };

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>